import { SmallDashOutlined } from '@ant-design/icons'
import { Popover, Tag } from 'antd'
import './index.less'

const truncateText = (text, maxLength) => {
  if (!text || text.length <= maxLength) return text
  return `${text.slice(0, maxLength)}...`
}

const renderTags = (items, fallbackText) =>
  items.length > 0 ? (
    items.map((item, index) => (
      <Tag
        key={index}
        bordered={false}
        color={item.variable || item.name ? undefined : 'orange'}
        title={item.variable || item.name || fallbackText}
      >
        {truncateText(item.variable || item.name || fallbackText, 10)}
      </Tag>
    ))
  ) : (
    <Tag bordered={false} color="orange">
      {fallbackText}
    </Tag>
  )

/**
 * 模型内显示tag信息
 * 配置对象用于控制模型内tag信息的显示。
 *
 * @property {Array}   firstThreeItems - 默认显示的数据项，默认为列表中的前三项。
 * @property {Array}   list            - 包含所有数据项的完整列表。
 * @property {String}  title           - 显示的文案标题或标签。
 */
export default function DisplayCont({ firstThreeItems = [], list = [], title = '输入' }) {
  const popoverContent = () =>
    list.map((item, index) => (
      <Tag key={index} bordered={false} color={item.variable || item.name ? undefined : 'orange'}>
        {item.variable || item.name || '未定义'}
      </Tag>
    ))

  return (
    <div className="flexRowStart mb-[8px]">
      <span className="pandl_node_title">{title}：</span>
      <div className="flexRowStart caseOverFlowX lace-effect w-[60%]">{renderTags(firstThreeItems, '未定义')}</div>
      {/* 展开更多 */}
      {list.length > 2 && (
        <Popover content={popoverContent} className="ml-[8px]" placement="bottom">
          <div className="limModeCont_svgBut cursonCase flexRow">
            <SmallDashOutlined />
          </div>
        </Popover>
      )}
    </div>
  )
}
